<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>

<input id="add" type="button" value="添加">
<br>

<table id="table" border="1" width="500" cellspacing="0">
    <tr>
        <td>商品名称</td>
        <td>规格</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
    </tr>

    <tr>
        <td><input type="text" value=""></td>
        <td>
            <select>
                <option>个</option>
                <option>张</option>
                <option>斤</option>
            </select>
        </td>
        <td><input id="price" type="text" value="" class="price" onkeyup="keyups(this)"></td>
        <td><input id="number" type="text" value="" onkeyup="keyups(this)"></td>
        <td><input id="subtotal" type="text" value=""></td>
        <td><input type="button" value="删除" onclick="delete1(this)"></td>
    </tr>

</table>

<br>
总数量：<input type="text" value="" id="numberAll" disabled="disabled"><br>
总价格：<input type="text" value="" id="moneyAll" disabled="disabled"><br>

</body>
</html>
<script>
    $(function () {
        //添加
        $("#add").click(function () {
            var html = '<tr>' +
                '        <td><input type="text" value=""></td>' +
                '        <td>' +
                '            <select>\n' +
                '                <option>个</option>' +
                '                <option>张</option>' +
                '                <option>斤</option>' +
                '            </select>' +
                '        </td>' +
                '        <td><input id="price" type="text" value="" class="price" onkeyup="keyups(this)"></td>' +
                '        <td><input id="number" type="text" value=""  onkeyup="keyups(this)"></td>' +
                '        <td><input id="subtotal" type="text" value=""  ></td>' +
                '        <td><input type="button" value="删除" onclick="delete1(this)"></td>' +
                '    </tr>'
            $("#table").append(html);
        })
    });

    //删除
    function delete1(obj) {
        $(obj).parent().parent().remove();
    }
    //小计
    function keyups(obj) {
        var price = $(obj).parent().parent().children();
        // console.log(price)
        var price1 = $($(price).children()[2]).val();
        var number = $($(price).children()[3]).val();
        var subtotal = price1 * number
        $($(price).children()[4]).val(subtotal)
        //总数量,总价格
        var temp = [];//总数量
        var all = [];//总价格
        var price2 = $(obj).parent().parent().parent().children()
        for (var i = 0; i < price2.length; i++) {
            var arr = $($(price2[i]).children()[3]).children().val();
            // console.log(arr)
            var arrAll = $($(price2[i]).children()[4]).children().val();
            temp.push(arr);
            all.push(arrAll);
        };
        // console.log(temp)
        //总数量
        var m = 0;
        for (var j = 0; j < temp.length; j++) {
            if (temp[j] == ""){
                continue;
            }
            else if (!isNaN(temp[j])) {
                m += parseInt(temp[j])
                $("#numberAll").val(m)
            }else {
                continue;
            }
            // console.log(m)
        }
        //总价格
        var n = 0;
        for (var k = 0; k < all.length; k++) {
            if(all[k] == ""){
                continue
            }
            else if (!isNaN(all[k])) {
                n += parseInt(all[k])
                $("#moneyAll").val(n)
            }else {
                continue;
            }
        }
    }
</script>